<template>
  <div class="headed">
    <div class="heads_left">
      <el-button
        class="heads_L_l"
        type="warning"
        icon="el-icon-s-fold"
        circle
        size="small"
        @click="ISCOLLAPSE"
      ></el-button>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="heads_L_r">
        <template v-for="(item, index) in badmb">
          <el-breadcrumb-item :key="index" :to="item.spa" :replace="true">{{
            item.cxt
          }}</el-breadcrumb-item>
        </template>
      </el-breadcrumb>
    </div>
    <div>
      <!-- <i class="el-icon-setting"></i> -->
      <el-dropdown :hide-timeout="300" @command="handleCommand">
        <span class="el-dropdown-link">
          {{ getUsername }}<i class="el-icon-setting adminI"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="user" icon="el-icon-user-solid"
            >个人信息</el-dropdown-item
          >
          <el-dropdown-item command="edit" icon="el-icon-switch-button"
            >退出</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from "vuex";
// import { Message } from "element-ui";
let arr = [];
export default {
  name: "",
  data() {
    return {
      badmb: ["首页"],
    };
  },
  created() {},
  mounted() {},
  computed: {
    ...mapGetters(["getUsername"]),
  },
  watch: {
    $route: function () {
      this.mianbao();
    },
  },
  methods: {
    ...mapMutations(["ISCOLLAPSE"]),
    ...mapActions(["quit"]),
    mianbao() {
      //面包屑
      let cxt = this.$route.meta.title.split("admin")[1];
      let spa = this.$route.path;
      let isspa = this.$route.path.split("/");
      if (isspa.length <= 2) {
        arr.push({ cxt, spa });
      }
      this.badmb = [...new Set(arr.map((t) => JSON.stringify(t)))].map((s) =>
        JSON.parse(s)
      );
    },
    // fn() {},
    handleCommand(command) {
      //   this.$message("click on item " + command);
      if (command == "edit") {
        // console.log(1);
        this.quit();
        this.$router.push("/login"); //跳转登录页
      }
    },
  },
};
</script>

<style  scoped>
.heads_left {
  position: relative;
}

.heads_L_l {
  position: absolute;
  top: 14px;
}
.el-breadcrumb /deep/ .el-breadcrumb__separator {
  color: #333;
}

.heads_L_r {
  display: inline-block;
  margin-left: 50px;
}
.adminI {
  margin-left: 10px;
}
</style>
